<template>
  <div class="div-app">

    <el-dialog

      title="区域详情"
      :visible="dialogVisi"
      width="600px"
      @close="ishowchange"
    >
      <el-row style="font-size: 16px;padding-bottom: 29px;">
        <el-col :span="4"><div class="grid-content bg-purple" />区域名称:</el-col>
        <el-col :span="10"><div class="grid-content bg-purple" />{{ changelist.name }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="4"><div class="grid-content bg-purple" />包含点位:</el-col>
        <el-col :span="20"><div class="grid-content bg-purple" />
          <template>
            <el-table
              v-loading="loadingApp"
              empty-text="暂无数据"
              :data="addlist"
              style="width: 100%"
            >
              <el-table-column
                type="index"
                label="序号"
                width="60"
              />
              <el-table-column
                prop="name"
                label="点位名称"
                width="180"
              />
              <el-table-column
                prop="vmCount"
                label="设备数量"
              />
            </el-table>
          </template>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import { seatchnodeApi } from '@/api'
export default {
  name: 'SeatA',
  props: {
    dialogVisi: {
      type: Boolean,
      default: false
    },
    changelist: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      addlist: [],
      loadingApp: true
    }
  },
  computed: {
    chekAll() {
      return this.changelist
    }
  },

  async created() {
    const { data } = await seatchnodeApi({ regionId: this.changelist.id })
    this.addlist = data.currentPageRecords
    this.loadingApp = false
  },
  methods: {
    ishowchange() {
      this.$emit('update:dialog-visi', false)
    }
  }
}
</script>
  <style scoped lang="scss">
  .point-app{
      width: 700px;
      height: 400px;
      border-radius: 20px;
      background-color: pink;
  }
  ::v-deep .el-dialog{
     border-radius: 20px;
     .el-dialog__body{
      width: 500px;
      margin: 0 auto;
     }
  }
  </style>

